<template>
    <div class="main">
      <div class="option" :class="{'select':activeDiv == item.id}" v-for="(item,index) in options" :key="index" @click="setActive(item.id)">
          <span>{{ item.name }}</span>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
      name:'Filter',
      emit:['filter'],
      setup(props,{emit}){
          let activeDiv = ref(0)
          let options = [
              {id:'0',name:'全部',keyword:'all'},
              {id:'001',name:'水果果切',keyword:'fruit'},
              {id:'002',name:'饮品酒水',keyword:'drink'},
              {id:'003',name:'生鲜蔬菜',keyword:'vegetable'},
              {id:'004',name:'日常用品',keyword:'daily'},
              {id:'005',name:'家具电器',keyword:'furniture'},
              {id:'006',name:'宠物用品',keyword:'pet'},
              {id:'007',name:'美妆彩妆',keyword:'makeup'},
              {id:'008',name:'手机数码',keyword:'digital'}
          ]
          //改变点击选项的样式
          function setActive(id){
              activeDiv.value = id
              emit('flt',options.filter((t)=>t.id == id))
          }
          
          return { options,activeDiv,setActive }
      }
  }
  </script>
  
  <style scoped>
      .main {
          display: flex;
          justify-content: space-around;
          color: rgb(88, 76, 76);
          background-color: #ffb5b5;
          border-radius: 8px;
          min-width: 500px;
      }
      .option {
          text-align: center;
          padding-top: 1%;
          height: 30px;
          min-width: 70px;
          border-radius: 5px;
      }
      .option:hover {
          color: azure;
          background-color: #f58a8a;
      }
      .select {
          background-color: #fb7272;
          color: #606266;
      }
      .select:hover {
          color: #303133;
          background-color: #f73030;
      }
  </style>